<template>
	<view class="my-container">
		<view class="header">
			<image :src="avatar" />
			<text>{{userInfo.realName}}</text>
		</view>
		<view class="content">
			<u-cell-group>
				<u-cell isLink title="个人资料" icon="account-fill" @click="accountData" />
				<u-cell isLink title="个人动态" icon="star-fill" @click="exactRecord" />
				<u-cell isLink title="消息" icon="chat-fill" />
			</u-cell-group>
			<u-cell-group>
				<u-cell isLink title="设置" icon="setting-fill" />
				<u-cell isLink title="反馈" icon="thumb-up-fill" />
				<u-cell isLink title="关于" icon="error-circle-fill" />
			</u-cell-group>
			<u-cell-group>
				<u-cell isLink title="退出账号" icon="close-circle-fill" @click="showModal" />
			</u-cell-group>
			<u-modal :show="show" @confirm="confirm" :asyncClose="true" content="确认要登出吗？"></u-modal>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import http from '../../http'
	export default {
		data() {
			return {
				avatar: 'https://www.mindskip.net:9008/image/ba607a75-83ba-4530-8e23-660b72dc4953/头像.jpg',
				userInfo: {},
				show: false
			}
		},
		methods: {
			accountData() {
				uni.navigateTo({
					url: '/pages/personalData/personalData'
				})
			},
			logout() {
				http({
					url: '/api/user/logout',
					method: 'POST'
				}).then(res => {
					// console.log(res);
					this.$refs.uToast.show({
						type: "success",
						message: "登出成功",
						duration: 1000,
						complete() {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						},
					});
				})
			},
			getCurrent() {
				http({
					url: '/api/student/user/current',
					method: 'POST'
				}).then(res => {
					console.log(res);
					this.userInfo = res.response
					this.avatar = res.response.imagePath
				})
			},
			showModal() {
				this.show = true
			},
			confirm() {
				this.show = false
				this.logout()
			},
			exactRecord() {
				uni.navigateTo({
					url: '/pages/recordDetail/recordDetail'
				})
			}
		},
		onLoad() {
			this.getCurrent()
		},
		onShow() {
			this.getCurrent()
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

		.my-container {
			height: 100%;
			background-color: #F7F7F7;

			.header {
				padding: 50rpx;
				background-color: #648ADD;
				display: flex;
				align-items: center;
				color: #FFFFFF;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
				}
			}

			.u-cell-group {
				margin-top: 20rpx;
				background-color: #FFFFFF;
			}
		}
	}
</style>